<template>
    <div class="empty">
        <span class="icon"></span>
        <span class="tip-text" v-if="text">{{text?text:'没有找到符合条件的结果'}}</span>
        <slot v-else></slot>
    </div>
</template>

<script>
export default{
    props:['text'],
    mounted(){

    }
}

</script>

<style lang="less">
.empty{
    // border:1px solid red;
    width:100%;
    font-weight:500;
    // height:calc((100vh - 263px));
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top:100px;
    .icon{
        width:300px;height:180px;
        background:url('../assets/pro/search/empty.svg') no-repeat;
        background-size:cover;
    }
    .tip-text{
        margin-top:20px;
        color:#969696;
    }
    &.comment-empty{
        padding-top:98px;
        .icon{
            width:179px;height:115px;
            background:url('../assets/pro/no_comment.svg') no-repeat;
            background-size:cover;
        }
    }

    &.recommend-empty{
        .icon{
            background:url('../assets/pro/no_recommend_data.svg') no-repeat;
            background-size:60%;
            background-position:center;
        }
    }
    &.img-comment{
        padding-top:0px;
    }
}
</style>